<template>
  <div>
    <div>财务管理</div>
    <div class="box">
      <!-- 左侧（开始） -->
      <div class="left">
        <div class="left-top">
          <div>
            <el-avatar :size="70" src="../public/image/3.jpg" />
          </div>
          <div style="margin-top: 80px">
            <span style="margin-left: 20px; margin-top: -50px">{{ financeBill.name }}&nbsp;{{ financeBill.sex }}&nbsp;{{ financeBill.age }}岁</span>
          </div>
        </div>
        <div class="left-center">
          <div><span>身份证号:</span><span>{{ financeBill.name }}</span></div>
          <div><span>类型:</span><span>居家</span></div>
          <div><span>入住号:</span><span>{{ financeBill.financeBill }}</span></div>
          <div><span>状态:</span><span>入住中</span></div>
          <div><span>所在楼号:</span><span>2号楼</span></div>
          <div><span>所在楼层:</span><span>4楼</span></div>
          <div><span>所在床位:</span><span>05号</span></div>
          <div><span>收费性质:</span><span>自费</span></div>
          <div><span>照护等级:</span><span>三级照护</span></div>
          <div><span>入住时间:</span><span>2022-04-15</span></div>
        </div>
        <div class="left-bot1">
          <div style="margin-top: 20px; margin-left: 110px">
            家属信息<span></span>
          </div>
          <div style="margin-left: 20px">家属姓名：<span></span></div>
          <div style="margin-left: 20px">联系电话</div>
        </div>
        <div class="left-bot2">
          <div>
            <span>医疗储备金:</span><span style="color: red">{{ financeBill.medical_reserve_fund }}</span>
          </div>
          <div>
            <span>照护储备金:</span><span style="color: red">{{ financeBill.pension_reserve_fund }}</span>
          </div>
        </div>
      </div>
      <!-- 左侧（结束） -->
      <!-- 右侧侧（开始） -->
      <div class="right">
        <div class="right-top">
          <p>充值/退费</p>
        </div>
        <div class="center">
          <div class="center1">
            <span style="margin-left:-90px">交易账号类型</span>
            <div style="margin-left:-150px">
              <input type="checkbox" name="" id="" />照护储备金&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="checkbox" name="" id="" />医疗储备金
            </div>
            <div><span>状态：</span><span>不欠费</span></div>
          </div>
          <div>余额：<span style="color: red">1000</span></div>
          <div>
            <span>充值/退费</span>
            <el-button type="primary" style="margin-left: 30px">充值</el-button>
            <el-button type="info" disabled="false">退费</el-button>
          </div>
          <div>
            输入充值金额 ￥<el-input v-model="amout" style="width: 200px" />
          </div>
          <div>支付方式</div>
          <div class="payment">
            <el-button type="primary">支付宝</el-button>
            <el-button type="primary">微信</el-button>
            <el-button type="primary">银行卡</el-button>
            <el-button type="primary">现金支付</el-button>
          </div>
          <div>
            <el-button type="primary" style="margin-left: 280px" @click="goPayment">确认充值</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div></div>
</template>

<script setup>
import Serive from '../../axios';
import { ref,onMounted } from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

const amout = ref()
const userId = ref('')
const financeBill=ref({})

onMounted(() => {  
  financeBill.value=JSON.parse(route.query.routerfinance)
  console.log(financeBill.value)
});
const goPayment = async () => {
  var data = {
    //随机订单号
    orderId: Math.random().toString(36).substr(2, 15),
    //支付金额
    total_amount: amout.value,
    userId: userId.value,
  }
  const response = await Serive.post('http://localhost:3000/llfAPi/payment', data, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  window.location.href = response.data.result
}



</script>

<style lang="scss" scoped>
.box {
  width: 1000px;
  height: 550px;
  // background-color: rgb(152, 97, 97);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// 左侧（开始）
.left {
  font-size: 13px;
  //   border: 1px solid rgb(12, 12, 12);
  width: 30%;
  height: 95%;
  border-radius: 10px;
  border: 1px solid rgb(167, 164, 164);
  // 阴影
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  // background-color: rgb(186, 202, 19);
}

.left-top {
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  // border: 1px solid rgb(177, 172, 172);
  background-color: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-top .el-avatar {
  //   margin-left: 30px;
  margin-top: 100px;
}

.left-center {
  margin-top: 50px;
  margin-left: 50px;
  width: 80%;
  // background-color: blueviolet;
}

.left-bot1 {
  height: 70px;
  width: 100%;
  background-color: gainsboro;
}

.left-bot2 {
  margin-top: 20px;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

// 左侧（结束）
.right {
  width: 65%;
  height: 95%;
  // background-color: rgb(186, 202, 19);
}

.right-top {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: gainsboro;
}

.center {
  width: 100%;
  height: 70%;
  // background-color: rgb(42, 196, 31);
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.center1 {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.payment {
  width: 100%;
  // height: 100px;
  display: flex;
  justify-content: center;
}
</style>